<script setup>
import { computed } from 'vue'
import { Position, Handle } from '@vue-flow/core'

const props = defineProps({
    id: String,
    data: Object,
    position: Object,
    type: String
})

// 计算坐标位置
const x = computed(() => `${Math.round(props.position.x)}px`)
const y = computed(() => `${Math.round(props.position.y)}px`)

// 节点类型颜色映射
const nodeColors = {
    input: { bg: 'linear-gradient(135deg, #1e3c72, #2a5298)', border: '#4fc3f7' },
    default: { bg: 'linear-gradient(135deg, #2c3e50, #4a6491)', border: '#81c784' },
    output: { bg: 'linear-gradient(135deg, #8e2de2, #4a00e0)', border: '#ffb74d' },
    process: { bg: 'linear-gradient(135deg, #1d976c, #11998e)', border: '#e57373' }
}

// 节点图标映射
const nodeIcons = {
    input: 'fa-download',
    default: 'fa-cog',
    output: 'fa-upload',
    process: 'fa-microchip'
}

// 节点类型标签
const nodeTypeLabel = {
    input: '输入节点',
    default: '默认节点',
    output: '输出节点',
    process: '处理节点'
}
</script>

<template>
    <div class="custom-node" :style="{
        background: nodeColors[type]?.bg || nodeColors.default.bg,
        borderColor: nodeColors[type]?.border || nodeColors.default.border
    }">
        <div class="node-header">
            <div class="node-icon">
                <i :class="['fas', nodeIcons[type] || nodeIcons.default]"></i>
            </div>
            <div class="node-title">{{ data.label }}</div>
        </div>

        <div class="node-content">
            {{ data.description || '节点描述信息' }}
        </div>

        <div class="node-position">
            <span class="position-label">位置:</span>
            <span class="position-value">X: {{ x }}, Y: {{ y }}</span>
        </div>

        <div class="node-footer">
            <div class="node-status">
                <div class="status-indicator"></div>
                <span>{{ nodeTypeLabel[type] || nodeTypeLabel.default }}</span>
            </div>
            <div class="node-actions">
                <div class="action-btn">
                    <i class="fas fa-info"></i>
                </div>
                <div class="action-btn">
                    <i class="fas fa-edit"></i>
                </div>
            </div>
        </div>

        <!-- 连接点 -->
        <Handle type="source" :position="Position.Bottom" class="node-handle" />
        <Handle type="target" :position="Position.Top" class="node-handle" />
    </div>
</template>